<template>
  <div>
    <p class="child-node">
      {{ msg }}
    </p>
    <button @click="pushDataToParent">向父组件传值</button>
    <div>
      <button @click="$emit('increased')">增加</button>
      <button @click="$emit('decreased')">减少</button>
    </div>
    <div>
      <h4>从父组件传递进来的</h4>
      <span> {{ fromParent }} </span>
    </div>
    <grand-child></grand-child>
  </div>
</template>

<script>
  import grandChild from './grandChild.vue'
  export default {
    data: function () {
      return {
        childrenData: "子组件中的值"
      }
    },
    props: {
      msg: String,
      putArr: {
        type: Array,
        required: true,
        default: [1, 5]
      },
      fromParent: {
        type: String,
      }
    },
    inheritAttrs: false,
    created: function () {
      console.log(this.$attrs)
    },
    mounted: function () {
      console.log(this.putArr);
    },
    watch: {
      fromParent () {
        clearInterval(this.timer);
        let vm = this;
        this.timer = setInterval(function(){
          vm.getSearList()
        },1000)
      }
    },
    methods: {
      pushDataToParent: function () {
        this.$emit("getChildrenData", 1)
      },
      getSearList () {
        this.fromParent = 123
      }
    },
    components: {
      grandChild
    }
  }
</script>

<style scoped>
  .child-node {
    color: red;
  }
</style>